<template>
  <div class="mian">
    <div class="mainitem" v-for="(item, index) in showGoods" :key="index">
      <img :src="item.show.img" alt="" />
      <span class="shoucang"></span>
      <span>{{ item.cfav }}</span>
      <span class="price">{{ item.price | finallPrice }}</span>
      <p class="txt">{{ item.title }}</p>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({}),
  props: {
    showGoods: {
      type: Array,
      default() {
        return []
      }
    }
  },
  filters: {
    finallPrice(price) {
      return '¥' + price
    }
  }
}
</script>
<style scoped>
.mian {
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  justify-content: space-around;
}
.mainitem {
  width: 48%;
  border-radius: 10px;
}
.mainitem img {
  width: 100%;
}
.shoucang {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: url("~assets/img/detail/detail_bottom.png");
  background-size: cover;
}
.txt {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.price {
  color: pink;
}
</style>